<template>
    <div id="RotationChartBox">
        <!--        顶部显示栏        -->
        <div>
            <div v-if="componentType === 'monitor'">
                <h5>{{ componentTitle }}</h5>
                <hr/>
            </div>

            <div v-else-if="componentType === 'dormitoryData'">
                <a-breadcrumb>
                    <a-breadcrumb-item
                        v-for="rumbItem in HierarchyDataList"
                        :key="rumbItem.key"
                        class="my-a-breadcrumb-item"
                    >
                        <a-icon class="my-a-icon" v-if="rumbItem.style !== ''" :type="rumbItem.style" />
                        <span>{{ rumbItem.content }}</span>
                    </a-breadcrumb-item>
                </a-breadcrumb>
                <hr/>
            </div>
        </div>

        <div class="row">
            <!--        左部展示栏        -->
            <div class="col-8">
                <div id="RotationChart" class="carousel slide" data-ride="carousel" v-if="componentType !== 'monitor'">
                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                        <li
                            v-for="(imgItem, index) in dormitoryData.RotationChartList"
                            :key="imgItem.key"
                            data-target="#RotationChart"
                            :data-slide-to="imgItem.key"
                            :class="index === 0 ? 'active' : ''"
                        >
                        </li>
                    </ul>

                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <div
                            v-for="(imgItem, index) in dormitoryData.RotationChartList"
                            :key="imgItem.key"
                            class="carousel-item"
                            :class="index === 0 ? 'active' : ''"
                        >
                            <img :src="imgItem.imgSrc" width="800px" height="400px">

                            <div class="carousel-caption">
                                <h4>{{ imgItem.imgTitle }}</h4>
                                <p>{{ imgItem.imgContent }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#RotationChart" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#RotationChart" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>

                <div v-if="componentType === 'monitor'">
                    <video controls="controls" style="height: 100%; width: 100%">
                        <source v-bind:src="dormitoryData.monitorDataList[this.activeVideoNumber].monitorVideoSrc" type="video/mp4">
                        您的浏览器不支持 HTML5 视频播放器
                    </video>
                </div>
            </div>

            <!--        右部展示栏        -->
            <div class="col-4">
                <div v-if="componentType === 'dormitoryShow'" id="dormitoryShow">
                    <div id="dormitoryShowTitleBox">
                        <h5>{{ dormitoryData.title.boxTitle }}</h5>
                        <hr/>
                    </div>

                    <div>
                        <p v-for="dataItem in dormitoryData.dormitoryShowDataList" :key="dataItem.key">
                            {{ dataItem.itemTitle }}：{{ dataItem.content }}
                        </p>

                        <hr/>

                        <div>
                            <small>{{ dormitoryData.title.littleTitle }}</small>

                            <p>{{ dormitoryData.introduce }}</p>

                            <small>{{ dormitoryData.date }}</small>
                        </div>
                    </div>

                    <router-link :to="{name: 'dorm'}" class="routerLinkButton text-center">
                        <i class="fa fa-eye"></i>
                        查看详细
                    </router-link>
                </div>

                <div v-else-if="componentType === 'monitor'" id="monitor">
                    <a-menu v-model="current" :default-selected-keys="[0]" mode="horizontal">
                        <a-menu-item
                            v-for="(dataItem, index) in dormitoryData.monitorDataList"
                            :class="index === 0 ? 'active' : ''"
                            v-bind:key="dataItem.key"
                            @click="changeVideo(index)"
                        >
                            <a-icon type="eye"/>
                            {{ dataItem.content }}
                        </a-menu-item>
                    </a-menu>

                    <div>
                        <video controls="controls" style="height: 100%; width: 100%">
                            <source v-bind:src="dormitoryData.videoSrc" type="video/mp4">
                            您的浏览器不支持 HTML5 视频播放器
                        </video>
                    </div>

                    <div>
                        <small>{{ dormitoryData.title.littleTitle }}</small>

                        <p>{{ dormitoryData.introduce }}</p>

                        <small>{{ dormitoryData.date }}</small>
                    </div>

                    <router-link :to="{name: 'dorm'}" class="routerLinkButton text-center">
                        <i class="fa fa-phone"></i>
                        快速报警
                    </router-link>
                </div>

                <div v-else-if="componentType === 'dormitoryData'" id="dormitoryData">
                    <div id="dormitoryDataTitleBox">
                        <h5>{{ dormitoryData.title.boxTitle }}</h5>
                        <hr/>
                    </div>

                    <div>
                        <p v-for="dataItem in dormitoryData.dormitoryDataList" :key="dataItem.key">
                            {{ dataItem.itemTitle }}：{{ dataItem.content }}

                            <a :href="'#' + dataItem.buttonhref" v-if="dataItem.buttonStyle !== ''" class="hrefButton text-center">
                                <i class="fa" :class="'fa-' + dataItem.buttonStyle"></i>
                                {{ dataItem.buttonContent }}
                            </a>
                        </p>

                        <hr/>

                        <div>
                            <small>{{ dormitoryData.title.littleTitle }}</small>

                            <p>{{ dormitoryData.introduce }}</p>

                            <small>{{ dormitoryData.date }}</small>
                        </div>
                    </div>

                    <router-link :to="{name: 'dorm'}" class="routerLinkButton text-center">
                        <i class="fa fa-eye"></i>
                        三维展示
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RotationChart",
        props: {
            componentTitle: {
                type: String,
                default: '大标题'
            },
            componentType: {
                type: String,
                default: 'dormitoryShow'
            },
            HierarchyDataList: {
                type: Array,
                default: function () {
                    return [
                        { key: 0, content: 'XXX小区', style: '' },
                        { key: 1, content: 'XX栋', style: '' },
                        { key: 2, content: 'X单元', style: 'ordered-list' },
                        { key: 3, content: 'XXX室', style: 'home' },
                    ]
                }
            },
            dormitoryData: {
                type: Object,
                default: function () {
                    return {
                        title: {
                            boxTitle: '标题',
                            littleTitle: '标题'
                        },
                        RotationChartList: [
                            { key: 0, imgSrc: 'https://static.runoob.com/images/mix/img_fjords_wide.jpg', imgTitle: '第一张图片描述标题', imgContent: '描述文字' },
                            { key: 1, imgSrc: 'https://static.runoob.com/images/mix/img_nature_wide.jpg', imgTitle: '第二张图片描述标题', imgContent: '描述文字' },
                            { key: 2, imgSrc: 'https://static.runoob.com/images/mix/img_mountains_wide.jpg', imgTitle: '第三张图片描述标题', imgContent: '描述文字' },
                        ],
                        dormitoryShowDataList: [
                            { key: 0, itemTitle: '宿舍地址', content: 'XXX小区XX栋X单元XXX室' },
                            { key: 1, itemTitle: '信息条目', content: 'XXXXXXXXX' },
                            { key: 2, itemTitle: '信息条目', content: 'XXXXXXXXX' },
                            { key: 3, itemTitle: '信息条目', content: 'XXXXXXXXX' },
                        ],
                        monitorDataList: [
                            { key: 'camera0', content: 'XXX', monitorVideoSrc: 'src/assets/videos/demonstration1.mp4' },
                            { key: 'camera1', content: 'XXX', monitorVideoSrc: 'src/assets/videos/demonstration2.mp4' },
                            { key: 'camera2', content: 'XXX', monitorVideoSrc: 'src/assets/videos/demonstration3.mp4' },
                            { key: 'camera3', content: 'XXX', monitorVideoSrc: 'src/assets/videos/demonstration4.mp4' },
                        ],
                        dormitoryDataList: [
                            { key: 0, itemTitle: '宿舍地址', content: 'XXX', buttonStyle: '', buttonContent: '', buttonhref: '' },
                            { key: 1, itemTitle: '宿舍编号', content: 'XXX', buttonStyle: '', buttonContent: '', buttonhref: '' },
                            { key: 2, itemTitle: '所在区域', content: 'XXX', buttonStyle: 'map-marker', buttonContent: '查看地图', buttonhref: 'lookMap' },
                            { key: 3, itemTitle: '入住状态', content: 'XXX', buttonStyle: 'calendar-o', buttonContent: '申请入住', buttonhref: 'applyCheck' },
                        ],
                        introduce: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
                        date: '2020年12月19日',
                        videoSrc: 'src/assets/videos/demonstration.mp4'
                    }
                }
            }
        },
        data() {
            return {
                current: ['camera0'],
                activeVideoNumber: '0'
            }
        },
        methods: {
            changeVideo: function (index) {
                this.activeVideoNumber = index
                // console.log(this.activeVideoNumber)
            }
        }
    }
</script>

<style scoped>
    /* 重写覆盖部分 antdv 组件样式 */
    .my-a-breadcrumb-item{
        cursor: default;
    }

    .my-a-icon{
        transform: translateY(-3px);
    }

    #RotationChart{

    }
    #RotationChart h4{
        color: #eeeeee;
    }

    #dormitoryShow{

    }

    #monitor{

    }

    #dormitoryData{

    }

    .hrefButton{
        margin-left: 10px;
        color: #ffffff;
        background-color: #00A1FF;
        border-radius: 6px;
        transition: 0.4s;
        padding: 5px 10px;
        font-size: 12px;
    }
    .hrefButton:hover{
        background-color: #538dff;
        color: #000000;
    }

    .routerLinkButton{
        margin-top: 20px;
        display: block;
        color: #ffffff;
        border-radius: 4px;
        background-color: #00A1FF;
        transition: 0.4s;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .routerLinkButton:hover{
        background-color: #538dff;
        color: #000000;
    }
</style>
